import React, { Component } from 'react'
import styles from './styles.less'
import { Redirect, Link } from 'react-router-dom'
import withStyle from '../../withStyle'

const colorList = [
	"#bed742",
	"#64492b",
	"#ac6767",
	"#1d953f",
	"#ef4136",
	"#375830",
	"#78331e",
	"#f15a22",
	"#6c4c49",
	"#2570a1"
]

class List extends Component {
	render() {
		return (
			<div>
				<ul className={styles.postList}>
					{this.props.articleList && this.props.articleList.map((item, index) => {
						return (
							<li key={item._id} className={styles.postListItem}>
								<article className={styles.articleCard}>
									<div className={styles.postMeta}>
										<span className={styles.postTime} >{item.articleTime}</span>
									</div>
									<div className={styles.postTitle}>
										<Link className={styles.postTitleLink} to={'/postArticle?id=' + item._id}>{item.articleTitle}</Link>
									</div>
									<div className={styles.postContent}>
										{item.articleDesc}
										<Link className={styles.postMore} to={'/postArticle?id=' + item._id}>阅读原文...</Link>
									</div>
									<div className={styles.footer}>
										<ul className={styles.articleTagList}>
											{
												item.articleTag.map((item, index) => {
													return (
														<a  key={item} href="/tag">
															<li className={styles.articleTagListItem}>
																<span style={{backgroundColor: colorList[index + 1]}} className={styles.articleTagItemLink} >{item}</span>
															</li>
														</a>
													)
												})
											}
										</ul>
									</div>
								</article>
							</li>
						)}
					)}
				</ul>
			</div>
		)
	}
}

export default withStyle(List, styles)